.comp-step {
    margin: 0 auto;
    padding: 64px 10px 64px;
    max-width: $layout-width;

    .step-title {
        margin-bottom: 48px;
        text-align: center;
        &-main {
            margin-bottom: 24px;
            line-height: 18px;
        }
        &-second {
            line-height: 13px;
            font-size: 13px;
            font-weight: normal;
            color: #777;
        }
    }

    .step-cont {
        position: relative;
        &:before {
            content: '';
            position: absolute;
            height: 1px;
            background-color: #2a98f8;
            top: 31px;
            left: 96px;
            right: 128px;
        }
        .s-item {
            &-icon {
                position: relative;
                margin-bottom: 24px;
                padding: 0 96px;
                &:before {
                    content: '';
                    display: block;
                    width: 64px;
                    height: 64px;
                    border: 1px solid #f1f1f1;
                    border-radius: 50%;
                    box-sizing: border-box;
                    background-color: #fff;
                }
                .icon--inner {
                    position: absolute;
                    top: 0;
                    left: 96px;
                    width: 64px;
                    height: 64px;
                    //height: 64px;
                    transition: transform .4s linear;
                    @each $step in signup, deposite, exchange, gain {
                        &.icon-#{$step} {
                            background-image: url('../img/icon_#{$step}.png');
                            //background-image: url('../img/icon_signup.png');
                            background-position: top;
                            background-repeat: no-repeat;
                            background-size: 100%;
                        }
                    }
                }
                .icon--arrow {
                    position: absolute;
                    width: 32px;
                    height: 10px;
                    left: 0;
                    top: 50%;
                    transform: translateX(280px) translateY(-50%);
                    background: #fff;
                    &:after {
                        content: '';
                        position: absolute;
                        top: 0;
                        width: 24px;
                        height: 100%;
                        background-image: url('../img/icon_jiantou@2x.png');
                        background-position: center;
                        background-repeat: no-repeat;
                        background-size: 100%;
                        animation: float 2s ease-in infinite;
                    }
                }
            }
            &-text {
                text-align: center;
                > .text-title {
                    margin-bottom: 8px;
                    font-size: 13px;
                    font-weight: bold;
                    color: #000;
                }
                > .text-sub {
                    font-size: 10px;
                    color: #777;
                }
            }
            &.active {
                .s-item-icon .icon--inner {
                    transform: scale(.75);
                }
                .s-item-text {
                    > .text-title, > .text-sub {
                        color: #2a98f8;
                        transition: all .2s linear;
                    }
                }
                .icon--inner {
                    @each $step in signup, deposite, exchange, gain {
                        &.icon-#{$step} {

                            //background-image: url('../img/icon_#{$step}@2x.png');
                            background-position: 0 -128px;
                            background-repeat: no-repeat;
                            background-size: 100%;
                            //transition: all .2s linear;
                        }
                    }
                }
            }
        }
    }
}

@keyframes float {
    0% {
        left: 0;
    }
    50% {
        left: 8px;
    }
    100% {
        left: 0;
    }
}